<!DOCTYPE html>
<html lang="ch-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎,您来到雪花的博客</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            /* border: 1px solid red; */
            background-image: url('https://api.ixiaowai.cn/api/api.php');
            background-repeat: no-repeat;
            background-size: cover;
        }
        .guide {
            display: flex;
            height: 100vh;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background-color: rgba(0, 0, 0, 0.6);
        }
        .guide>.headimg {
            /* overflow: hidden; */
        }
        .guide>.headimg>img {
            width: 80px;
            border-radius: 50%;
        }
        .content {
            color: white;
            line-height: 30px;
            text-align: center;
        }
        .content>h1 {
            margin-top: 18px;
            margin-bottom: 24px;
        }
        .push{
            margin-top: 24px;
        }
        .push>a {
            display: inline-block;
            color: white;
            border: 1px solid white;
            border-radius: 16px;
            padding: 6px 12px 6px 12px;
            text-decoration: none;
        }
        .icon {
            margin-top: 24px;
        }
        .icon>a {
            color: white;
            text-decoration: none;
            font-size: 30px;
            margin: 4px;
        }
    </style>
</head>
<body>
    <div class="guide">
        <div class="headimg">
            <img src="//cdn.moozae.com/index/favicon.jpg" alt="">
        </div>
        <div class="content">
            <h1>小雪花喵喵喵</h1>
            <p>是爱吃糖糖🍥的雪花喵🏳️‍⚧️~</p>
            <p>欢迎您来到这里喵!</p>
        </div>
        <div class="push">
            <a id="pushRoute" href="javascript: 0;">进入博客</a>
        </div>
        <div class="icon">
            <a class="fa fa-github" href="javascript: 0;"></a>
            <a class="fa fa-qq" href="javascript: 0;"></a>
        </div>
    </div>
    <script>
        // 当前地址域名/ip+端口
        const baseUrl = location.origin
        // 跳转的按钮
        const $push = document.getElementById('pushRoute')
        // 跳转手机端还是电脑端的方法
        $push.addEventListener('click', function () {
          const screenWidth = window.screen.width || window.screen.availWidth
          const screenHeight = window.screen.height || window.screen.availHeight
          if (screenWidth > screenHeight) {
            alert('电脑端')
            location.href = `http://www.baidu.com`
          } else if (screenWidth < screenHeight) {
            location.href = `http://www.baidu.com`
            alert('手机端')
          } else {
            location.href = `http://www.baidu.com`
            alert('未知,默认跳转电脑端')
          }
        })
    </script>
</body>
</html>